<template>
  <div>
    <div>
      <el-input v-model="header" placeholder="头部" style="width: 200px"></el-input>
      <br />
      <el-input v-model="msg" placeholder="内容" style="width: 200px"></el-input>
      <br />
      <el-input v-model="footer" placeholder="底部" style="width: 200px"></el-input>
    </div>
    <child-slot>
      {{ msg }}
    </child-slot>
    <slot-juming>
      <template v-slot:header>
        <div>具名插槽： {{ header }}</div>
      </template>
      <template v-slot:msg>
        <div>具名插槽： {{ msg }}</div>
      </template>
      <template v-slot:footer>
        <div>具名插槽： {{ footer }}</div>
      </template>
    </slot-juming>
    <br />
    <h3>作用域插槽</h3>
    <slot-zuoyongyu>
      <template v-slot="{ item, index }">
        <div>
          <el-button @click="handleClick(item, index)">点击事件</el-button>
        </div>
      </template>
    </slot-zuoyongyu>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import childSlot from './child-slot.vue'
import slotJuming from './slot-juming.vue'
import slotZuoyongyu from './slot-zuoyongyu.vue'
let header = ref('')
let msg = ref('')
let footer = ref('')
let a = []
for (let i = 0; i < 10; i++) {
  a.push({
    id: i + 1,
    label: 'label' + i,
    value: 'value' + i
  })
}
const list = reactive(a)
const handleClick = (item: any, index: number) => {
  console.log(item)
  console.log(index)
}
</script>
<style lang="scss" scoped></style>
